"use client"

// Completely redesign the Dashboard to be more focused
import { useNavigate } from "react-router-dom"
import { Card, Typography, Row, Col, Statistic, Button, Space } from "antd"
import { ProjectOutlined, TeamOutlined, CloudServerOutlined, FileTextOutlined, PlusOutlined } from "@ant-design/icons"
import { useHosts } from "../contexts/HostsContext"
import "../styles/global.scss"
import "./Dashboard.scss"

const { Title, Text } = Typography

const Dashboard = () => {
  const navigate = useNavigate()
  const { projects, departments, modules, hostsBlocks } = useHosts()

  // Get statistics
  const totalProjects = projects.length
  const totalModules = modules.length
  const totalHostsBlocks = hostsBlocks.length
  const totalDepartments = departments.length

  // Get department statistics
  const departmentStats = departments
    .map((dept) => {
      const projectCount = projects.filter((p) => p.departmentId === dept.id).length
      return {
        id: dept.id,
        name: dept.name,
        projectCount,
        color: dept.color || "#3b82f6",
      }
    })
    .sort((a, b) => b.projectCount - a.projectCount)

  return (
    <div className="container">
      <div className="dashboard-header">
        <div>
          <Title level={4} className="m-0">
            系统概览
          </Title>
          <Text type="secondary">Hosts Manager 系统统计信息</Text>
        </div>
        <Space>
          <Button type="primary" icon={<PlusOutlined />} onClick={() => navigate("/projects")}>
            创建项目
          </Button>
        </Space>
      </div>

      <Row gutter={[24, 24]} className="stats-section">
        <Col xs={24} sm={12} md={6}>
          <Card className="stat-card enhanced-card" onClick={() => navigate("/projects")}>
            <div className="stat-content">
              <div className="stat-icon-wrapper circle-icon-enhanced bg-gradient-blue">
                <ProjectOutlined />
              </div>
              <div className="stat-info">
                <div className="stat-value">{totalProjects}</div>
                <div className="stat-title">项目总数</div>
              </div>
            </div>
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card className="stat-card enhanced-card" onClick={() => navigate("/settings")}>
            <div className="stat-content">
              <div className="stat-icon-wrapper circle-icon-enhanced bg-gradient-purple">
                <TeamOutlined />
              </div>
              <div className="stat-info">
                <div className="stat-value">{totalDepartments}</div>
                <div className="stat-title">部门总数</div>
              </div>
            </div>
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card className="stat-card enhanced-card">
            <div className="stat-content">
              <div className="stat-icon-wrapper circle-icon-enhanced bg-gradient-green">
                <FileTextOutlined />
              </div>
              <div className="stat-info">
                <div className="stat-value">{totalModules}</div>
                <div className="stat-title">模块总数</div>
              </div>
            </div>
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card className="stat-card enhanced-card">
            <div className="stat-content">
              <div className="stat-icon-wrapper circle-icon-enhanced bg-gradient-amber">
                <CloudServerOutlined />
              </div>
              <div className="stat-info">
                <div className="stat-value">{totalHostsBlocks}</div>
                <div className="stat-title">配置总数</div>
              </div>
            </div>
          </Card>
        </Col>
      </Row>

      <Row gutter={[24, 24]} style={{ marginTop: "24px" }}>
        <Col xs={24} lg={12}>
          <Card
            title={
              <div className="card-title-with-icon">
                <TeamOutlined style={{ marginRight: "8px", color: "#8b5cf6" }} />
                <span>部门项目分布</span>
              </div>
            }
            className="enhanced-card"
            bodyStyle={{ padding: "24px" }}
          >
            {departmentStats.length > 0 ? (
              <div className="department-stats-container">
                {departmentStats.map((dept) => (
                  <div
                    key={dept.id}
                    className="department-stat-item"
                    onClick={() => navigate(`/departments/${dept.id}`)}
                  >
                    <div className="department-stat-header">
                      <div className="department-stat-name">
                        <div
                          className="department-icon"
                          style={{
                            backgroundColor: dept.color,
                            width: "32px",
                            height: "32px",
                            borderRadius: "8px",
                            display: "flex",
                            alignItems: "center",
                            justifyContent: "center",
                            color: "white",
                            marginRight: "12px",
                          }}
                        >
                          {dept.name.charAt(0)}
                        </div>
                        <div>
                          <div style={{ fontWeight: 500 }}>{dept.name}</div>
                          <div style={{ fontSize: "12px", color: "rgba(0, 0, 0, 0.45)" }}>
                            {dept.projectCount} 个项目
                          </div>
                        </div>
                      </div>
                      <div
                        className="department-stat-count"
                        style={{ fontSize: "24px", fontWeight: 600, color: dept.color }}
                      >
                        {dept.projectCount}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div className="empty-stats">
                <Text type="secondary">暂无部门数据</Text>
              </div>
            )}
          </Card>
        </Col>
        <Col xs={24} lg={12}>
          <Card
            title={
              <div className="card-title-with-icon">
                <ProjectOutlined style={{ marginRight: "8px", color: "#3b82f6" }} />
                <span>项目统计</span>
              </div>
            }
            className="enhanced-card"
            bodyStyle={{ padding: "24px" }}
          >
            <Row gutter={[16, 16]}>
              <Col span={12}>
                <Card className="inner-stat-card">
                  <Statistic
                    title="平均每个部门项目数"
                    value={totalDepartments ? (totalProjects / totalDepartments).toFixed(1) : 0}
                    precision={1}
                    valueStyle={{ color: "#3b82f6" }}
                  />
                </Card>
              </Col>
              <Col span={12}>
                <Card className="inner-stat-card">
                  <Statistic
                    title="平均每个项目模块数"
                    value={totalProjects ? (totalModules / totalProjects).toFixed(1) : 0}
                    precision={1}
                    valueStyle={{ color: "#8b5cf6" }}
                  />
                </Card>
              </Col>
              <Col span={12}>
                <Card className="inner-stat-card">
                  <Statistic
                    title="平均每个模块配置数"
                    value={totalModules ? (totalHostsBlocks / totalModules).toFixed(1) : 0}
                    precision={1}
                    valueStyle={{ color: "#10b981" }}
                  />
                </Card>
              </Col>
              <Col span={12}>
                <Card className="inner-stat-card">
                  <Statistic
                    title="平均每个项目配置数"
                    value={totalProjects ? (totalHostsBlocks / totalProjects).toFixed(1) : 0}
                    precision={1}
                    valueStyle={{ color: "#f59e0b" }}
                  />
                </Card>
              </Col>
            </Row>
          </Card>
        </Col>
      </Row>
    </div>
  )
}

export default Dashboard
